<template>
  <el-row>
     <el-form inline class="mt-10" :model="search">
      <el-form-item label="终端SN码">
        <el-select v-model="search.sn" clearable filterable placeholder="请输入或选择">
          <el-option v-for="item in sn_list" :key="item.device_sn" :value="item.device_sn" :label="item.device_sn"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="success" size="small" icon="el-icon-search" @click="handleClickSearch">查询</el-button>
    </el-form>
    <el-table :data="date" size="small">
      <el-table-column align="center" label="终端SN码" prop="speakerid"></el-table-column>
      <el-table-column align="center" label="金额" prop="price"></el-table-column>
      <el-table-column align="center" label="支付类型" prop="price_type">
        <template slot-scope="scope">
          <span>{{ scope.row.price_type == 1 ? '支付宝支付' : scope.row.price_type == 2 ? '微信支付' : scope.row.price_type == 3 ? '云支付' : scope.row.price_type == 4 ? '余额支付' : scope.row.price_type == 5 ? '微信储值' : scope.row.price_type == 6 ? '微信买单' : scope.row.price_type == 7 ? '银联刷卡' : '通用' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付时间" prop="datetime"></el-table-column>
      <el-table-column align="center" label="记录状态">
        <template slot-scope="scope">
          <span :class="scope.row.used == 0 ? 'err' : ''">{{ scope.row.used == 0 ? '未取走' : scope.row.used == 1 ? '已取走' : '无' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="fr mt-10" :total="page.total" :current-page.sync="page.current" :page-size="page.size" layout="total, prev, pager, next, jumper" @current-change="handleHistoryPage"></el-pagination>
  </el-row>
</template>

<script>
import { CloudSpearkHistoryInit, CloudSpearkHistorySearch, CloudSpearkHistoryPage } from '@/api/shop'

export default {
  data() {
    return {
      date: [],
      sn_list: [],
      search: {
        sn: ''
      },
      page: {
        size: 0,
        total: 0,
        current: 1
      }
    }
  },
  methods: {
    handleHistoryInit() {
      CloudSpearkHistoryInit(this.$route.query.store_id).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.list.data.records
          this.page.size = res.data.result.list_count
          this.page.total = res.data.result.total_count
          this.page.current = res.data.result.page
          this.sn_list = res.data.result.sn
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickSearch() {
      CloudSpearkHistorySearch(this.$route.query.store_id, this.search).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.list.data.records
          this.page.size = res.data.result.list_count
          this.page.total = res.data.result.total_count
          this.page.current = res.data.result.page
          this.sn_list = res.data.result.sn
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleHistoryPage(v) {
      CloudSpearkHistoryPage(this.$route.query.store_id, this.search, v).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.list.data.records
          this.page.size = res.data.result.list_count
          this.page.total = res.data.result.total_count
          this.page.current = res.data.result.page
          this.sn_list = res.data.result.sn
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    }
  },
  created() {
    this.handleHistoryInit()
  }
}
</script>